<template>
    <l-page class="pb-3 block">
        <l-navbar title="税费计算器" />
        <view>
            <u-image :src="$imgUrl + '600/200'" width="100%" height="150"></u-image>
        </view>
        <view class="!-mt-6 panel shadow relative">
            <u-steps :current="step">
                <u-steps-item title="填写资料"></u-steps-item>
                <u-steps-item title="获取结果"></u-steps-item>
            </u-steps>
            <view class="my-3 border-b border-gray-200"></view>
            <view v-if="step == 0">
                <view class="flex justify-center">
                    <view>
                        <u-radio-group placement="row" v-model="formData.a">
                            <template v-for="(item, index) in types" :key="index">
                                <u-radio shape="circle" :label="item.label" :name="item.value"></u-radio>
                                &emsp;&emsp;&emsp;
                            </template>
                        </u-radio-group>
                    </view>
                </view>
                <l-input type="digit" class="mt-3" label="房屋面积" v-model="formData.Area" />
                <l-input type="digit" class="mt-3" label="房屋单价" v-model="formData.priceper" />
                <template v-if="formData.a == 'getEsfSf'">
                    <l-input type="digit" class="mt-3" label="房屋总价" :disabled="formData.a == 'getEsfSf'"
                        v-model="formData.Price" suffix="（万元）" />
                    <l-input type="digit" class="mt-3" label="房屋原价" v-model="formData.Price2" suffix="（万元）"
                        v-if="formData.CaculateType == 2" />
                    <l-select class="mt-3" label="计征方式" :list="LevyingTaxes" v-model="formData.CaculateType"></l-select>
                    <l-select class="mt-3" label="房屋性质" :list="natures" v-model="formData.HouseType"></l-select>
                    <l-select class="mt-3" label="房产购置满5年" :list="duration" v-model="formData.YearType"></l-select>
                    <view class="mt-3 flex items-center">
                        <view class="mr-3">卖方家庭唯一住房</view>
                        <u-radio-group placement="row" v-model="formData.IsOnlyHouse">
                            <template v-for="(item, index) in firsts" :key="index">
                                <u-radio shape="circle" :label="item.label" :name="item.value"></u-radio>
                                &emsp;
                            </template>
                        </u-radio-group>
                    </view>
                </template>

                <view class="mt-3 flex items-center" v-if="formData.a == 'getXfsf'">
                    <view class="mr-3">有无电梯</view>
                    <u-radio-group placement="row" v-model="formData.elevator">
                        <template v-for="(item, index) in lifts" :key="index">
                            <u-radio shape="circle" :label="item.label" :name="item.value"></u-radio>
                            &emsp;
                        </template>
                    </u-radio-group>
                </view>

                <view class="mt-3 flex items-center">
                    <view class="mr-3">买房家庭首次购房</view>
                    <u-radio-group placement="row" v-model="formData.IsFirstHouse">
                        <template v-for="(item, index) in firsts" :key="index">
                            <u-radio shape="circle" :label="item.label" :name="item.value"></u-radio>
                            &emsp;
                        </template>
                    </u-radio-group>
                </view>

                <l-button class="mt-3" type="success" @tap="getData">查询需缴纳税费</l-button>
            </view>
            <view v-else>
                <view class="m-3" v-if="step == 1">
                    <view class="text-sm text-red-500">计税结果（本试算仅供参考，请以税所为准）</view>
                    <view class="text-center table mt-3" v-if="formData.a == 'getXfsf'">
                        <view class="tr">
                            <view class="td">房款总款</view>
                            <view class="td">{{ detail.zongjia }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">工本费</view>
                            <view class="td">{{ detail.gongbenfei }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">契税</view>
                            <view class="td">{{ detail.qishui }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">权属登记费</view>
                            <view class="td">{{ detail.quanshudengjifei }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">维修基金</view>
                            <view class="td">{{ detail.weixiujijin }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">合计</view>
                            <view class="td">{{ detail.shuifeizongjia }} 元</view>
                        </view>
                    </view>
                    <view class="text-center table mt-3" v-else>
                        <view class="tr">
                            <view class="td">工本印花税</view>
                            <view class="td">{{ detail.gongbenyinhuashui }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">印花税</view>
                            <view class="td">{{ detail.yinhuashui }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">契税</view>
                            <view class="td">{{ detail.qishui }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">个人所得税</view>
                            <view class="td">{{ detail.geshui }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">增值税</view>
                            <view class="td">{{ detail.zengzhishui }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">综合地价款</view>
                            <view class="td">{{ detail.zonghedijiakuan }} 元</view>
                        </view>
                        <view class="tr">
                            <view class="td">合计</view>
                            <view class="td">{{ detail.heji }} 元</view>
                        </view>
                    </view>
                </view>
                <l-button class="mt-3" @tap="step = 0">上一步</l-button>
            </view>
        </view>

    </l-page>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import Loan from "@/stores/loan"
const loan = Loan(), step = ref(0)
const types = [
    {
        label: '新房',
        value: 'getXfsf'
    },
    {
        label: '二手房',
        value: 'getEsfSf'
    }
],
    firsts = [
        {
            label: '是',
            value: 1,
        },
        {
            label: '否',
            value: 2,
        }
    ],
    lifts = [
        {
            label: '有',
            value: 1,
        },
        {
            label: '无',
            value: 2,
        }
    ],
    natures = [
        {
            label: '普通住宅',
            value: 1,
        },
        {
            label: '非普通住宅',
            value: 2,
        },
        {
            label: '经济适用房',
            value: 3,
        },
    ],
    duration = [

        {
            label: '满5年',
            value: 3,
        },
        {
            label: '满2年',
            value: 2,
        },
        {
            label: '不满两年',
            value: 1,
        },

    ],
    LevyingTaxes = [
        {
            label: '总价',
            value: 1,
        },
        {
            label: '差价',
            value: 2,
        }
    ]
let formData = reactive<{ [key: string]: any }>({
    c: 'tools',
    a: 'getXfsf',
    // 计征方式
    CaculateType: 1,
    // 面积
    Area: '',
    // 房屋属性
    HouseType: 1,
    // 是否首次购房
    IsFirstHouse: 1,
    // 卖方唯一住房
    IsOnlyHouse: 1,
    // 总价
    Price: '',
    // 原价
    Price2: '',
    // 购置满X年
    YearType: 3,
    city: 'bj',
    // 有无电梯
    elevator: 1,
    // 单价
    priceper: ''
})
watch(() => formData.Area + formData.priceper, () => {
    formData.Price = (formData.Area * formData.priceper / 10000).toFixed(2)
})

let detail = ref<any>({})
const getData = () => {
    let data = { ...formData }
    data.Price = data.Price * 10000
    data.Price2 = data.Price2 * 10000
    let tip = {
        Area: '请填写面积',
        priceper: '请填写单价'
    }
    for (let i in tip) {
        if (!formData[i]) return toast(tip[i as keyof typeof tip]);
    }
    loan.taxes_and_fees(data).then((res: any) => {
        detail.value = res
        step.value = 1
    })
}
const toast = (str: string) => {
    uni.showToast({
        title: str,
        icon: 'none'
    })
}
</script>
<style scoped lang="scss"></style>